<template>
  <view class="user-info-wrap">
    <image class="avator" :src="userPhoto ? userPhoto : desc"></image>
    <view class="info">
      <view class="id-num">ID：610103200407201234</view>
      <view class="name">姓名：{{userName}}</view>
      <view class="class-num">班级：{{className}}</view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'userInfo',
	data() {
		return {
			userName: '',
      className: '',
      userPhoto:'',
      desc: '/static/images/analyze/def_user.png'
		}
	},
	created() {
		this.initUserInfo()
	},
	methods: {
		initUserInfo() {
			const userInfo = uni.getStorageSync('USER_INFO')
			this.userName = JSON.parse(userInfo).userName
      this.className = JSON.parse(userInfo).className
      this.userPhoto = JSON.parse(userInfo).userPhoto
		}
	}
  
}
</script>
<style lang="scss" scoped>
.user-info-wrap {
  width: 100%;
  padding: 20upx 18upx 42upx;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1upx solid #E1E1E1;
  display: flex;
  .avator{
    width:150upx;
    height:150upx;
    border-radius:10upx;
    margin-right: 20upx;
  }
  .info{
    flex: 1;
    min-width: 0;
    padding: 8upx 0;
    box-sizing: border-box;
    .id-num,.name,.class-num{
      font-size: 30upx;
      color: #333333;
      line-height: 56upx;
    }
  }
}
</style>

